<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container dashboard-content">
    <div class="row-fluid first-row stats-row" ng-hide="statsClosed">
        <div class="span12">
            <div class="stats-container">
                <div class="row-fluid">
                    <div class="span8">
                        <div class="graphics-box" gm-taskboard-graph></div>
                    </div>
                    <div class="span4">
                        <div class="information-box">
                            <div class="info-header">
                                <div class="progress-box">
                                    <div class="progress">
                                        <div class="bar" style="width: {{ stats.percentageCompletedPoints|number:1 }}%"></div>
                                    </div>

                                    <div class="progress-indicator">{{ stats.percentageCompletedPoints|number:1 }}%</div>
                                    <div class="help" i18next="taskboard.completed-points">completed<br />points</div>
                                </div>
                            </div>
                            <div class="info-rows">
                                <div class="row-item points">
                                    <div class="row-label" i18next="taskboard.points">Points</div>
                                    <div class="row-indicator">{{ stats.totalPoints }}</div>
                                    <div class="row-help" i18next="taskboard.total-points">total <br />points</div>
                                    <div class="row-indicator">{{ stats.completedPoints }}</div>
                                    <div class="row-help" i18next="taskboard.completed-points">completed <br />points</div>
                                    <div class="row-indicator">{{ stats.remainingPoints }}</div>
                                    <div class="row-help" i18next="taskboard.remaining-points">remaining <br />points</div>
                                </div>

                                <div class="row-item tasks">
                                    <div class="row-label" i18next="taskboard.tasks">Tasks</div>
                                    <div class="row-indicator">{{ stats.totalTasks }}</div>
                                    <div class="row-help" i18next="taskboard.total-tasks">total <br />tasks</div>
                                    <div class="row-indicator">{{ stats.completedTasks }}</div>
                                    <div class="row-help" i18next="taskboard.completed-tasks">completed <br />tasks</div>
                                    <div class="row-indicator">{{ stats.remainingTasks }}</div>
                                    <div class="row-help" i18next="taskboard.remaining-tasks">remaining <br />tasks</div>
                                </div>
                                <div class="row-item dates">
                                    <div class="row-label" i18next="taskboard.dates">Dates</div>
                                    <div class="row-indicator">{{ milestone.estimated_start|momentFormat:"L" }}</div>
                                    <div class="row-help" i18next="taskboard.start-date">start<br />date</div>
                                    <div class="row-indicator">{{ milestone.estimated_finish|momentFormat:"L" }}</div>
                                    <div class="row-help" i18next="taskboard.finish-date">finish<br />date</div>
                                </div>
                                <div class="row-item data">
                                    <div class="row-label" i18next="taskboard.data">Data</div>
                                    <div class="row-indicator" data-icon="r">{{ stats.iocaineDoses }} <span i18next="taskboard.iocaine-doses">iocaine doses</span></div>
                                    <!--<div class="labor-force" data-icon="s">90% <span>labor force</span></div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="actions-container">
        <div class="actions-bar-sbox">
            <div class="title-sbox">
                <a data-icon="C" href="" ng-class="{active: !statsClosed}"
                   ng-click="statsClosed=!statsClosed">
                   <span ng-show="!statsClosed" i18next="taskboard.hide-stats">
                       Hide statistics
                   </span>
                   <span ng-show="statsClosed" i18next="taskboard.show-stats">
                       Show statistics
                   </span>
               </a>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="kanban-container tasks-container">
                <div class="header">
                    <table gm-equal-column-width min-width="250" watch="constants.taskStatusesList">
                        <thead>
                            <tr>
                                <td class="row-us-description"></td>
                                <td class="" ng-repeat="status in constants.taskStatusesList|orderBy:'order'"
                                        style="border-right-color: {{ status.color }}">
                                    <div class="badge" style="background-color: {{ status.color }};">{{ status.name }}</div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="us in userstoriesList">
                                <td class="row-us-description" style="width: {{ 100/(constants.taskStatusesList.length+1) }}%">
                                    <div class="info">
                                        <div class="title clearfix">
                                            <a href="{{ urls.userStoryUrl(projectSlug, us.ref, false, {milestone: milestone.id}) }}">#{{ us.ref }} {{ us.subject }}</a>
                                            <ul class="us-points-per-role">
                                                <li ng-repeat="role in constants.computableRolesList"
                                                    gm-generic-choice-popover="ctrl.saveUsPoints(us, role, selectedId)"
                                                    gm-popover-model="constants.pointsList"
                                                    gm-popover-class-name="us-points-popover"
                                                    class="us-point">
                                                    {{ role.name }}: {{ constants.points[us.points[role.id]].name }}
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="status">
                                            <div class="icon" data-icon="I"
                                                 ng-show="us.is_closed"></div>
                                            <div class="icon" data-icon="q"
                                                 ng-show="!us.is_closed"></div>
                                            <div class="icon" data-icon="J"
                                                 ng-show="us.client_requirement"></div>
                                            <div class="icon" data-icon="N"
                                                 ng-show="us.team_requirement"></div>
                                            <div class="label"
                                                 gm-generic-choice-popover="ctrl.saveUsStatus(us, selectedId)"
                                                 gm-popover-class-name="us-status-popover"
                                                 gm-popover-model="constants.usStatusesList"
                                                 style="background-color: {{ constants.usStatuses[us.status].color }}">
                                                {{ constants.usStatuses[us.status].name }}</div>
                                            <div data-icon="o" class="icon blocked" ng-show="us.is_blocked"
                                                 gm-markdown-preview-popover=""
                                                 gm-popover-model="us.blocked_note"
                                                 gm-popover-class-name="us-blocked-popover"
                                                 gm-popover-title="taskboard.blocking-reasons-popover">
                                            </div>
                                        </div>
                                    </div>
                                    <a href="" data-icon="A" class="add-new-task"
                                       ng-click="ctrl.openCreateTaskForm(us)"
                                       i18next="taskboard.add-new-task">
                                        Add new task
                                    </a>
                                    <a href="" data-icon="A" class="add-bulk-of-tasks"
                                       ng-click="ctrl.openBulkTasksForm(us)"
                                       i18next="taskboard.add-bulk-of-tasks">
                                        Add a bulk of tasks
                                    </a>
                                </td>
                                <td class="col-task-status col-task-{{ status.name|slugify }} tasks"
                                        ng-repeat="status in constants.taskStatusesList|orderBy:'order'"
                                        style="width: {{ 100/(constants.taskStatusesList.length+1) }}%"
                                        gm-sortable="tasks" gm-sortable-selector=".task-box"
                                        gm-sortable-item-name="task"
                                        gm-sortable-on-add="ctrl.sortableOnAdd"
                                        gm-sortable-on-update="ctrl.sortableOnUpdate"
                                        gm-sortable-on-remove="ctrl.sortableOnRemove">

                                    <div class="task-box" ng-repeat="task in usTasks[us.id][status.id]">
                                        <div ng-include="'/partials/taskboard-task.html'"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="row-us-description unassigned-task" style="width: {{ 100/(constants.taskStatusesList.length+1) }}%">
                                    <div class="info">
                                        <div class="title" i18next="taskboard.unassigned-tasks">Unassigned Tasks</div>
                                        <div class="description"></div>
                                    </div>
                                    <a href="" data-icon="A" class="add-new-task"
                                       ng-click="ctrl.openCreateTaskForm(us)"
                                       i18next="taskboard.add-new-task">
                                        Add new task
                                    </a>
                                </td>
                                <td class="col-task-status col-task-{{ status.name|slugify }} tasks"
                                        ng-repeat="status in constants.taskStatusesList|orderBy:'order'"
                                        style="width: {{ 100/(constants.taskStatusesList.length+1) }}%"
                                        gm-sortable="tasks"
                                        gm-sortable-selector=".task-box"
                                        gm-sortable-item-name="task"
                                        gm-sortable-on-add="ctrl.sortableOnAdd"
                                        gm-sortable-on-remove="ctrl.sortableOnRemove">

                                    <div class="task-box" ng-repeat="task in unassignedTasks[status.id]">
                                        <div ng-include="'/partials/taskboard-task.html'"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="taskboard-task-modalform"
        gm-modal="task-form"
        ng-show="formOpened"
        ng-controller="TaskboardTaskModalController as tbModalCtrl">

    <div class="new-task-modal modal">
        <form class="inline-form task-form" gm-checksley-form="tbModalCtrl.submit()">
            <div class="modal-header" ng-switch on="context.type">
                <h3 ng-switch-when="create" i18next="taskboard.create-task">Create task</h3>
                <h3 ng-switch-when="edit" i18next="taskboard.modify-task">Modify task</h3>
            </div>
            <div class="modal-body">
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="taskboard.subject">Subject</label>
                        <input class="subject" type="text" name="subject" data-required="true"
                            data-error-message="Required"
                            ng-model="form.subject"></input>
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="taskboard.status">Status</label>
                        <select class="status" name="status" ng-model="form.status" data-required="true"
                            data-type="number" data-error-message="Required"
                            ng-options="c.id as c.name for c in constants.taskStatusesList|orderBy:'order'"></select>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label i18next="taskboard.assigned-to">Assigned to</label>
                        <select name="assigned_to"
                                ng-model="form.assigned_to"
                                ui-select2="assignedToSelectOptions"
                                data-error-message="Required">
                            <option value="" i18next="task.unassigned">Unassigned</option>
                            <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                                {{ m.full_name }}
                            </option>
                        </select>
                    </fieldset>
                </div>
                <div class="fieldset-row icons">
                    <fieldset>
                        <input type="checkbox" class="iocaine hidden" id="iocaine" name="iocaine"i
                               ng-model="form.is_iocaine"></input>
                        <label for="iocaine" >
                            <span class="icon" data-icon="r"></span>
                            <span i18next="taskboard.is-iocaine">Is iocaine</span>
                        </label>
                    </fieldset>
                    <fieldset>
                        <input type="checkbox"id="is-blocked" class="is-blocked hidden"
                               ng-model="form.is_blocked" name="is_blocked">
                        <label for="is-blocked">
                            <span data-icon="o" class="icon blocked"></span>
                            <span i18next="taskboard.is-blocked">Is blocked</span>
                        </label>
                    </fieldset>
                </div>
                <div class="fieldset-row" ng-show="form.is_blocked">
                    <fieldset>
                        <label i18next="taskboard.blocking-reasons">Reasons for blocking</label>
                        <textarea class="blocked-note" name="blocked_note"
                                  placeholder="Some reasons..."
                                  i18next="placeholder:taskboard.blocking-reasons-placeholder"
                                  ng-model="form.blocked_note" gm-markitup preview-id="blocked-preview"></textarea>
                        <div id="blocked-preview" class="preview"></div>
                    <fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="taskboard.tags">Tags</label>
                        <input type="text" name="tags"
                               ng-model="form.tags" ui-select2="tagsSelectOptions"
                               data-placeholder="{{ 'taskboard.tags-placeholder'|i18next }}" />
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="taskboard.description">Description</label>
                        <textarea class="description" name="description" ng-model="form.description" gm-markitup preview-id="preview"></textarea>
                        <div id="preview" class="preview"></div>
                    </fieldset>
                </div>
            </div>
            <div class="modal-footer">
                <div gm-spinner class="spinner-container"></div>
                <input type="submit" class="button button-success" gm-checksley-submit-button value="Save"  i18next="value:taskboard.save"/>
                <a href="" class="button button-cancel" ng-click="tbModalCtrl.close()" i18next="taskboard.close">Close</a>
            </div>
        </form>
    </div>
</div>

<div id="bulk-tasks-modalform"
    gm-modal="bulk-tasks-form"
    ng-show="formOpened"
    ng-controller="TaskboardBulkTasksModalController as tbBulkModalCtrl">

    <div class="bulk-tasks-modal modal">
        <form class="inline-form task-form" gm-checksley-form="tbBulkModalCtrl.submit()">
            <div class="modal-header" ng-switch on="context.type">
                <h3 i18next="taskboard.bulk-tasks">Create a bulk of tasks</h3>
            </div>
            <div class="modal-body">
                <fieldset class="fieldset-row">
                    <fieldset>
                        <textarea ng-model="form.bulkTasks" data-required="true"
                            placeholder="One task per line..." rows="20"
                            i18next="placeholder:taskboard.task-per-line"></textarea>
                    </fieldset>
                </fieldset>
            <div class="modal-footer">
                <div gm-spinner class="spinner-container"></div>
                <input type="submit" class="button button-success"
                       gm-checksley-submit-button value="Save" i18next="value:taskboard.save" />
                <a href="" class="button button-cancel" ng-click="tbBulkModalCtrl.close()" i18next="taskboard.close">Close</a>
            </div>
        </form>
    </div>
</div>

<script type="text/ng-template" id="points-for-role">
    <div class="points-per-role-popover">
        <ul class="us-points-per-role">
            <li ng-repeat="role in constants.computableRolesList" class="us-point">
                {{ role.name }}: {{ constants.points[us.points[role.id]].name }}
            </li>
        </ul>
    </div>
<script>
